'use strict'
import { View } from '../../component'
import style from './css.css'
const HEIGHT = 180 / 75
import { observer, inject } from 'mobx-react'
@inject('user') @observer class Header extends React.Component {
  static propTypes = {
    item: PropTypes.object,
    user: PropTypes.object,
    history: PropTypes.object
  }
  _handleTap = this._handleTap.bind(this)
  _handleTap (item) {
    // console.log(item)
    if (item.redirect_type === 'web') {
      window.location.href = item.redirect_id
    }
    if (item.redirect_type === 'invite_code') {
      if (!this.props.user.userInfo.uuid) {
        this.props.user.getUserInfo(true)
      }
      else {
        this.props.history.push('/set/share')
      }
    }
  }
  render () {
    const { item } = this.props
    return (
      <View
        className={style.headerImage}
        style={{
          width: `${HEIGHT * item.ratio}rem`,
          backgroundImage: `url(${item.pic_url})`
        }}
        tap={() => { this._handleTap(item) }}
      >
      </View>
    )
  }
}

export default Header
